<template>
	<view class="box">
		<!-- 使用记录 -->
		<!-- 	<view class="cord" :class="list.length>0?'bgc':''">
			<text @click="goCord">红包说明＞</text>
		</view> -->
		<view class="itemtop">
			<view :class="titindex==1?'active':''" @click="settitindex(1)">我的红包</view>
			<view :class="titindex==2?'active':''" @click="settitindex(2)">赠送红包</view>
			<view @click="goCord" style="color: red;">红包说明＞</view>
		</view>
		<view class="" style="height: 110rpx;"></view>

		<!-- 空 -->
		<view class="none" v-if="isNotRed">
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/big/icon_226@2x.png" mode=""></image>
			</view>
			<view class="f30 tr c666">暂时没有任何红包哦</view>
			<!-- 红包领取中心 -->
			<view class="btn" @click="goCenter">红包领取中心</view>
		</view>
		<!-- <image src="@/static/img/hb.png" mode=""></image> -->
		<!-- 列表 -->
		<view class="list" v-else>
			<template v-if="titindex == 1">
				<view class="card flex" v-for="(item,index) of list" :key="index">
					<view class="left">
						<view class="price">￥<text class="f40 bold">{{item.red_packet_price}}</text></view>
						<view class="tj f24" v-if="item.use_min_price > 0">满{{item.use_min_price}}可用</view>
						<view class="tj f24" v-else>无门槛</view>
					</view>
					<view class="right">
						<view class="one">{{item.red_name}}</view>
						<view class="two f24">{{item.create_date}}</view>
						<view class="two f24" v-if="item.end_date">{{item.end_date}}</view>
						<view class="three flex" @click="zhankai(index)">
							<view>
								<view class="desc" :class="!item.look?'hide-line':''">{{item.use_intro}}</view>
							</view>
							<view class="icon" v-if="item.desc.length>17">
								<image src="https://jw.xzsw2021.com/static/img/icon_62@2x.png" mode=""
									v-if="!item.look">
								</image>
								<image src="https://jw.xzsw2021.com/static/img/icon_63@2x.png" mode="" v-else></image>
							</view>
						</view>
						<!-- 立即领取 -->
						<view class="lingqu" v-if="item.status == 0 && item.type != 3" @click="goUse(item)">
							去使用
						</view>
						<view class="lingqu" v-if="item.is_give" @click="share(item)">
							<view class="" style="position: relative;width: 100%;height: 100%;">
								去赠送
								<button open-type="share"
									style="position: absolute;width: 100%;height: 100%;opacity: 0;top: 0;">

								</button>
							</view>

						</view>

					</view>
				</view>
				<!-- 红包领取中心 -->
				<view class="" style="height: 130rpx;"></view>
				<view class="btn" @click="goCenter">红包领取中心</view>
			</template>
			<template v-if="titindex == 2">
				<view class="card flex" v-for="(item,index) of fissionList" :key="index">
					<view class="left">
						<view class="price">￥<text class="f40 bold">{{item.price}}</text></view>
						<!-- <view class="tj f24" v-if="item.use_min_price > 0">满{{item.use_min_price}}可用</view>
						<view class="tj f24" v-else>无门槛</view> -->
						<view class="tj f24">分享领取{{item.share_num}}次</view>
					</view>
					<view class="right">
						<view class="one">{{item.red_name}}</view>
						<view class="two f24">{{item.create_date}}</view>
						<view class="two f24" v-if="item.end_date">{{item.end_date}}</view>
						<view class="three flex" @click="zhankai(index)">
							<view>
								<view class="desc" :class="!item.look?'hide-line':''">{{item.use_intro}}</view>
							</view>
							<view class="icon" v-if="item.desc.length>17">
								<image src="https://jw.xzsw2021.com/static/img/icon_62@2x.png" mode=""
									v-if="!item.look">
								</image>
								<image src="https://jw.xzsw2021.com/static/img/icon_63@2x.png" mode="" v-else></image>
							</view>
						</view>
						<view class="lingqu" v-if="item.status == 1 &  item.share_num > item.receive_num"
							@click="shareFission(item)">
							<view class="" style="position: relative;width: 100%;height: 100%;">
								去分享
								<button open-type="share"
									style="position: absolute;width: 100%;height: 100%;opacity: 0;top: 0;">
								</button>
							</view>
						</view>
						<view class="lingqu" v-else-if="item.status == 2 ">
							<view class="" style="position: relative;width: 100%;height: 100%;">
								领取完毕
								<button style="position: absolute;width: 100%;height: 100%;opacity: 0;top: 0;">
								</button>
							</view>
						</view>
						<view class="lingqu" v-else>
							<view class="" style="position: relative;width: 100%;height: 100%;">
								已失效
								<button style="position: absolute;width: 100%;height: 100%;opacity: 0;top: 0;">
								</button>
							</view>
						</view>

					</view>
				</view>
				<!-- 红包领取中心 -->
				<view class="" style="height: 130rpx;"></view>
				<view class="btn" @click="goCenter">红包领取中心</view>
			</template>
		</view>
		<!--  -->

<!-- <image src="../../../static/img/hb.png" mode=""></image> -->
	</view>
</template>

<script>
	import {
		getUserRedListApi,
		getUserFissionRedListApi
	} from '@/api/user.js'
	export default {
		data() {
			return {
				titindex: 1,
				redSearch: {
					page: 1,
					limit: 15,
					type: '',
					get_type: '',
					status: 0
				},
				shareData: {}, //赠送普通红包
				fissionData: {}, //赠送裂变型红包
				list: [],
				isNotRed: false,
				fissionSearch: {
					page: 1,
					// limit: 15,
					// status: '',
					// type: ''
				},
				fissionList: []
			}
		},
		created() {
			this.userRedList()
			this.userFissionRed()
		},
		onReachBottom() {
			if (this.titindex == 1) {
				this.redSearch.page += 1
				this.userRedList()
			} else {
				this.fissionSearch.page += 1
				this.userFissionRed()
			}
		},
		onShareAppMessage(res) {
			if (this.shareData) { //用户红包赠送  非裂变型
				let img = ''
				let title = ''
				if (this.shareData.type == 3) {
					img = this.shareData.vip.pic
					title = '赠送' + this.shareData.vip.grade_name
				} else if (this.shareData.type == 1) {
					title = `价值${this.shareData.red_packet_price}元满减红包`
				} else {
					title = `价值${this.shareData.red_packet_price}元免运费红包`
				}
				//缺少领取页面
				return {
					title: title,
					imageUrl: img,
					path: `?userRedxxx=1&key=${this.shareData.uni}&id=${this.shareData.id}&spread_spid=${this.shareData.uid}`
				}
			} else { //分享裂变型
				console.log(this.fissionData)
				
				return {
					title: this.fissionData.red_name,
					// imageUrl: require('@/static/img/hb.png'),
					imageUrl: '/static/img/hb.png',
					path: `/pages/user/myredbao/receive?key=${this.fissionData.uni}&id=${this.fissionData.id}&spread_spid=${this.fissionData.uid}`

				}


			}
		},
		methods: {
			//用户红包
			userRedList() {
				getUserRedListApi(this.redSearch).then(res => {
					this.list.push(...res.data.data)
				}).catch(err => {

				})
			},
			//用户裂变型红包
			userFissionRed() {
				getUserFissionRedListApi(this.fissionSearch).then(res => {
					this.fissionList.push(...res.data.data)
				}).then(err => {

				})
			},
			settitindex(e) {
				this.titindex = e
				if (this.titindex == 1) {
					if (!this.list.length)
						this.userRedList()
				} else {
					if (!this.fissionList.length)
						this.userFissionRed()
				}

			},
			// 红包说明
			goCord() {
				console.log('红包说明');
				uni.navigateTo({
					url: '/pages/user/myredbao/redbao-desc/redbao-desc'
				})
			},
			// 展开
			zhankai(index) {
				this.list[index].look = !this.list[index].look;
			},
			// 红包领取中心
			goCenter() {
				console.log('红包领取中心');
				uni.navigateTo({
					url: '/pages/user/myredbao/redbao-center/redbao-center'
				})
			},
			share(item) {
				this.fissionData = false
				this.shareData = item
			},
			shareFission(item) {
				this.shareData = false
				this.fissionData = item
			},
			goUse(item) {
				if (item.mer_id) {
					uni.navigateTo({
						url: `/pages/client/shop/shop?id=${item.mer_id}`
					})
				} else {
					uni.switchTab({
						url: `/pages/index/index`
					})
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.itemtop {
		display: flex;
		height: 110rpx;
		align-items: center;
		position: fixed;
		z-index: 99;
		width: 100%;
		background: #FFFFFF;
		justify-content: space-between;
		top: 0;
		box-sizing: border-box;
		padding: 0 60rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.active {
		color: #000 !important;
		font-weight: bold !important;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active::after {
		position: absolute;
		content: '';
		width: 60rpx;
		height: 4rpx;
		background: #333;
		bottom: -10rpx;
	}

	.box {
		.tab {
			height: 96rpx;
			padding: 0 100rpx;
		}

		.cord {
			padding: 30rpx;
			font-size: 26rpx;
			text-align: right;
			color: #F45E14;
		}

		.bgc {
			background-color: #F5F5F5;
		}

		.none {
			.none-img {
				margin: 148rpx auto 80rpx;
				width: 376rpx;
				height: 329rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.list {
			min-height: calc(100vh - 96rpx);
			background-color: #F5F5F5;
			padding: 0 30rpx 30rpx;
			box-sizing: border-box;

			.card {
				position: relative;
				margin-bottom: 20rpx;
				width: 690rpx;
				// height: 186rpx;
				padding: 23rpx 28rpx 23rpx 0;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;

				.left {
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-right: 1rpx dashed #CCCCCC;
					text-align: center;
					color: #F83535;

					.price {
						margin-top: 28rpx;
					}

					.tj {
						margin-top: 6rpx;
						color: #666;
					}
				}

				.right {
					position: relative;
					flex: 1;
					padding-right: 30rpx;
					margin-left: 30rpx;
					font-size: 28rpx;

					.two {
						margin: 28rpx 0;
						color: #666;
					}

					.three {
						color: #999;
						font-size: 24rpx;
						overflow: hidden;

						.desc {
							flex: 1;
							width: 420rpx;
						}

						.icon {
							flex-shrink: 0;
							margin-left: 20rpx;
							width: 26rpx;
							height: 14rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.lingqu {
						position: absolute;
						right: 30rpx;
						top: 56rpx;
						width: 130rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1rpx solid #F83535;
						border-radius: 22rpx;
						font-size: 26rpx;
						color: #F83535;
						// button{
						// 	width: 100%;
						// 	height: 100%;
						// 	opacity: 0;
						// }
					}

					.get {
						border: 1rpx solid #ccc;
						color: #666;
					}
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 60rpx;
			left: 50rpx;
			// transform: translateX(-50%);
			width: 650rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #F83535;
			font-size: 28rpx;
			background: #FFFFFF;
			border: 1rpx solid #F83535;
			border-radius: 45rpx;
			z-index: 101;
		}
	}
</style>
